<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div id="app">
        <div class="container">
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <td>姓名</td>
                        <td>性别</td>
                        <td>介绍</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="user in userList">
                        <td>{{user.name}}</td>
                        <td>{{user.sex === 'm'? '男':'女'}}</td>
                        <td>{{user.des}}</td>
                    </tr>
                </tbody>
            </table>
        </div>


        <button @click="$destroy()">销毁</button>

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 1. beforeCreate 基本没用
        // 2. created 对数据的一些处理就可以放在这个阶段
        var goodsList = [{
                title: "上装",
                typeList: [
                    "全部",
                    "针织衫",
                    "毛呢外套",
                    "T恤",
                    "羽绒服",
                    "棉衣",
                    "卫衣",
                    "风衣",
                ],
                id: 1,
            },
            {
                title: "裤装",
                typeList: [
                    "全部",
                    "牛仔裤",
                    "小脚/铅笔裤",
                    "休闲裤",
                    "打底裤",
                    "哈伦裤",
                ],
                id: 2,
            },
            {
                title: "裙装",
                typeList: ["全部", "连衣裙", "半身裙", "长袖连衣裙", "中长款连衣裙"],
                id: 3,
            },
        ];


          // 使用mockjs生成假数据
          function getPersonList(num) {
            // fill(0)先让数组里有数据，里面没有数据map是不会遍历的
            return new Array(num).fill(0).map(() =>
                Mock.mock({
                    name: Mock.Random.cname(),
                    img: Mock.Random.image("100x100", Mock.Random.color()),
                    des: Mock.Random.csentence(10, 30),
                    "sex|1": ["m", "f"],
                    id: Mock.Random.id(),
                })
            );
        }

        console.log(getPersonList(10))

        //   使用mock拦截请求
        Mock.mock('/user', () => getPersonList(10))

        var vm = new Vue({
            el: "#app",
            data: {
                goodsList,
                num: 0,
                userList: [],
                timer: null,
            },
            methods: {
                // _内部使用的方法
                _getUser(){
                    var that = this;
                    $.ajax({
                        url: "/user",
                        success: function(data){
                            // console.log(data);
                            that.userList = JSON.parse(data);
                        }
                    })

                }

            },
            created(){
                // 可以在created钩子函数里面对数据进行处理
                this.goodsList.forEach(good => this.$set(good,"currentIndx",0))

                // 手动的添加某个数字的监听 也可以写在created
                this.$watch("num",() =>{console.log("num变化了2")});

                this.timer = setInterval(() => console.log(new Date()),1000)

            },
            mounted(){
                // mounted 和created钩子函数中 经常用来做页面的初始的异步数据的请求
                this._getUser();

            },
            beforeDestroy(){
                // beforeDestroy 用于实例 销毁前 释放数据，手动事件的解绑，定时器清除
                console.log('销毁前')
                // 销毁前 vm实例还存在 this的指向当前实例 ，data数据都还在
                clearInterval(this.timer);
            },
            destroyed(){
                console.log("销毁后");
            },
            watch: {
                // 方法的调用所以不写返回值所以有undefined，直接赋值就会直接把值打印出来
                num(){
                    console.log("num变化了")
                }

            },


        })
        // vm.goodsList.forEach(good => vm.$set(good, 'currentIndex', 0))
        // vm.$watch("num",() =>{console.log("num变化了2")})

      
    </script>
</body>

</html>